#导航栏
<script setup lang="ts">
import {onMounted, ref, watch} from "vue";
import {useRoute} from "vue-router";
import {search_job} from '../store/search_job';
import {search_talents} from '../store/search_talents';
import {search_all_job_without_condition} from "@/store/search_all_job";

const homeNav = ref()

onMounted(() => {
  // 添加滚轮监听事件 处理导航动画效果
  window.addEventListener('scroll', () => {
    homeNav.value.classList.toggle("sticky", window.scrollY != 0)
  })
})

interface NavClass {
  tabsBgColor: string,
  tabTextColor: string
}

const map = new Map<string, NavClass>;
map.set("resume", {tabsBgColor: "grey-lighten-5", tabTextColor: "text-blue-accent-2"})


/*
  导航栏动态样式
 */
let tabsBgColor = ref("undefined")
let tabTextColor = ref("text-white")
let userEmail = localStorage.getItem('userEmail')
let userRole = localStorage.getItem('userRole')
const route = useRoute()
// 处理点击所有工作时调用search函数
const handleFindallTabClick = () => {
  search_all_job_without_condition();
};

// 处理点击岗位推荐时调用search函数
const handleRecommendTabClick = () => {
  search_job();
};

// 处理点击岗位推荐时调用search函数
const handleSocialTabClick = () => {
  search_talents();
};
/**
 * 根据路由动态设置导航栏样式
 */
const setNavClass = () => {
  const name = route.name as string;
  map.forEach((value, key) => {
    if (name && name.includes(key)) {
      tabsBgColor.value = value.tabsBgColor
      tabTextColor.value = value.tabTextColor
    } else {
      tabsBgColor.value = "undefined"
      tabTextColor.value = "text-white"
    }
  })
}

onMounted(() => {
  // 当两次路由没有发生变化时调用
  setNavClass()
})

watch(route, (value, oldValue, onCleanup) => {
  // 路由发生变化时调用
  setNavClass()
})


// 处理退出登录
const handleLogout = () => {
  sessionStorage.removeItem('userEmail');
  userEmail = null;
};

</script>

<template>
  <!-- 导航区 -->
  <div id="index-header" ref="homeNav">
    <v-tabs slider-color="white" align-tabs="center" :bg-color="tabsBgColor">
      <v-tab to="/">
        <span :class="tabTextColor">首页</span>
      </v-tab>
      <v-tab to="/findjob" @click="handleFindallTabClick">
        <span :class="tabTextColor">所有岗位</span>
      </v-tab>
      <v-tab v-if="userRole === 'jobSeeker'" to="/assessment">
        <span :class="tabTextColor">能力评价</span>
      </v-tab>
      <v-tab v-if="userRole === 'jobSeeker'" to="/recommend" @click="handleRecommendTabClick">
        <span :class="tabTextColor">岗位推荐</span>
      </v-tab>
      <v-tab v-if="userRole === 'recruiter'" to="/social" @click="handleSocialTabClick">
        <span :class="tabTextColor">社会招聘</span>
      </v-tab>
      <div class="icon">
  <v-menu open-on-hover>
    <template v-slot:activator="{ props }">
      <v-btn
        :class="tabTextColor"
        variant="text"
        v-bind="props"
      >
        {{ userEmail ? userEmail : '未登录' }}
      </v-btn>
    </template>

    <v-list>
      <v-list-item v-if="userEmail" :to="userRole === 'jobSeeker' ? '/resume' : '/hire'">
        <v-list-item-title>个人中心</v-list-item-title>
      </v-list-item>
      <v-list-item v-else to="/login">
        <v-list-item-title>前往登录</v-list-item-title>
      </v-list-item>
      <v-list-item v-if="userEmail" @click="handleLogout">
        <v-list-item-title>退出登录</v-list-item-title>
      </v-list-item>
    </v-list>
  </v-menu>
</div>

    </v-tabs>
  </div>
</template>

<style scoped>


#index-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.sticky {
  background: black;
  transition: 0.5s;
}

.icon {
  --v-btn-height: var(--v-tabs-height);
  position: relative;
  border-radius: 0;
  min-width: 90px;
  display: flex;
  justify-content: center;
  align-items: center
}
</style>
